<template>
  <el-dialog title="分配角色" :visible="visible" width="25%" @close="hide">
    <el-select v-model="roles" multiple placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      >
      </el-option>
    </el-select>
    <div slot="footer" class="dialog-footer">
      <el-button @click="hide">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>
 
<script>
import { getUserRolesById, getAllRoles, updateAdminRole } from '@/request/api'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    did: {
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      // 这是表示 select里面 被 选择的数据
      // el-select v-model 需要绑定的是  options 里面的value 的数组
      roles: [],
      //  下拉框的选项，要从服务器获取所有的角色
      options: []
    }
  },
  methods: {
    hide(isReload) {
      if (typeof isReload === 'boolean') {
        this.$emit('show', isReload)
      } else {
        this.$emit('show')
      }
    },
    getAllData() {
      if (this.did === -1) return
      // Promise.all() 当多个异步需要都成功才做事情
      // Promise.all 方法会等待 数组里面的 所有的pomise 对象 成功，才执行 then 方法
      Promise.all([getUserRolesById(this.did), getAllRoles()]).then(res => {
        if (res[0].code === 200 && res[1].code === 200) {
          this.roles = res[0].data.map(item => item.id)
          this.options = res[1].data
        }
      })

    },
    submit() {
      updateAdminRole({
        adminId: this.did, roleIds: this.roles.join()
      }).then(res => {
        if (res.code === 200) {
          this.$message.success('修改成功')
          this.hide(true)
        }
      })
    }
  },
  watch: {
    did() {
      this.getAllData()
    }
  }
}
</script>
 
<style lang = "less" scoped>
</style>